<template>
  <div class="body">
    <div class="message">
      <van-cell-group v-for="(item, index) in list" :key="index">
        <van-cell :title="item.name"
                  :value="item.icon"
                  icon="shop" is-link
                  @click="display(index)" />
        <van-popup v-model="show"
                   position="left"
                   class="popup"
                   v-if="item.flag">
          <real-message
            :msg="item.current"
            :name="item.name"
            @giveMsg="change($event)"
            :icon="item.icon"
            ></real-message>
        </van-popup>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
  import {Cell, CellGroup, Popup} from 'vant';
  import RealMessage from './Info/RealMessage'

  export default {
    name: "PersonalMessage",
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Popup.name]: Popup,
      RealMessage: RealMessage
    },
    data() {
      return {
        list: [
          {"current": "Nickname", "name": "昵称", "icon": "", "flag": false},
          {"current": "Sex", "name": "性别", "icon": "", "flag": false},
          {"current": "PhoneNumber", "name": "手机号码", "icon": "", "flag": false},
          {"current": "Birthday", "name": "出生日期", "icon": "", "flag": false},
          {"current": "HeadImg", "name": "修改头像", "icon": "", "flag": false},
          {"current": "Password", "name": "修改密码", "icon": "", "flag": false},
        ],
        show: false,
      }
    },
    filters: {
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
      route(index) {
        document.getElementById(index).click();
      }
    },
    methods: {
      getData: function () {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("user/users/getInfo"), {headers: {'token': token}})
          .then((res) => {
            _this.list[0].icon = res.data.data.nick_name;
            _this.list[1].icon = res.data.data.sex;
            _this.list[1].icon = _this.changeSex(_this.list[1].icon);
            _this.list[2].icon = res.data.data.telphone;
            _this.list[3].icon = res.data.data.birthday;
            let date = new Date(_this.list[3].icon * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = date.getDate();
            if(D < 10){
              D = '0' + D;
            }
            _this.list[3].icon = Y + M + D;
          });
      },
      changeSex: function (index) {
        if (index === 0) {
          index = "男";
        }
        else if (index === 1) {
          index = "女";
        }
        else {
          index = "错误";
        }
        return index;
      },
      display(i) {
        let _this = this;
        _this.show = true;
        _this.list[i].flag = true;
      },
      reset(){
        let _this = this;
        for (let j in _this.list) {
          _this.list[j].flag = false;
        }
      },
      change(msg) {
        let _this = this;
        _this.show = msg;
      },
      /**
       * 从个人信息页的头像和昵称处跳转处接受信息，判断展开详细信息页面。
       **/
      fromPersonalMember(){
        let _this = this;
        let flag = _this.$route.query.flag;
        let num = _this.$route.query.num;
        if(flag){
          _this.display(num);
        }
      }
    },
    mounted() {
      let _this = this;
      _this.getData();
      _this.fromPersonalMember();
    },
    watch: {
      // 检查url是否变化
      "show": function (val, oldVal) {
        let _this = this;
        _this.getData();
        if(!val){
          _this.reset();
        }
      },
      // 深度观察监听
      deep: true
    },
  }
</script>

<style scoped>
  .message {
    margin-top: 30px;
  }

  .candidate-item span {
    display: block;
    font-size: 14px;
    color: #000000;
    letter-spacing: 1px;
    text-align: justify;
    line-height: 60px;
  }

  .popup {
    width: 100%;
    height: 100%;
  }
</style>
